<template id="allschool">
  <div>

    <el-table :data="tableData"
              border
              style="width: 100%">

      <el-table-column prop="school_name"
                       label="学校姓名"
                       width="250">
      </el-table-column>
      <el-table-column prop="creation_time"
                       label="创建日期"
                       width="180">
      </el-table-column>

      <el-table-column prop="name"
                       label="校长姓名"
                       width="150">
      </el-table-column>
      <el-table-column prop="address"
                       label="地址"
                       width="300">
      </el-table-column>
      <el-table-column prop="tel"
                       label="学校电话"
                       width="120">
      </el-table-column>

      <el-table-column prop="teacher_num"
                       label="老师人数量"
                       width="120">
      </el-table-column>

      <el-table-column label="操作"
                       width="200">

        <template slot-scope="scope">

          <el-button @click.native.prevent="select(scope.row)"
                     type="text"
                     lock-scroll>查看校长账号信息</el-button>
          <el-button @click.native.prevent="update(scope.row)"
                     type="text"
                     size="small">修改密码</el-button>
        </template>

      </el-table-column>

    </el-table>

    <el-dialog title="密码修改"
               :visible.sync="updatedialogVisible"
               width="25%">

      <el-form :model="ruleForm"
               status-icon
               :rules="rules"
               ref="ruleForm"
               label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="输入新密码"
                      prop="pass">
          <el-input type="password"
                    v-model="ruleForm.pass"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码"
                      prop="checkPass">
          <el-input type="password"
                    v-model="ruleForm.checkPass"
                    autocomplete="off"></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="submitForm('ruleForm'),updatedialogVisible=false">确 认</el-button>
        <el-button type="primary"
                   @click="updatedialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 点击查看账号信息的弹出框 -->
    <el-dialog title="账号信息"
               :visible.sync="selectdialogVisible"
               width="25%">
      <h5>账号</h5>
      <h3>{{ account }}</h3>
      <el-divider></el-divider>
      <h5>密码</h5>
      <h3>{{ password }}</h3>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="selectdialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

  </div>

</template>

<script>
import axios from 'axios'
import commons from '../../assets/commons'

export default {
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      updatedialogVisible: false,
      selectdialogVisible: false,
      account: '',
      password: '',
      uid: '',
      tableData: [],

      ruleForm: {
        uid: '',
        pass: '',
        checkPass: '',
      },
      rules: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
      },
    }
  },

  methods: {
    submitForm(formName) {
      this.updatedialogVisible = true
      console.log(this.uid)
      console.log(this.ruleForm.checkPass)
      
      axios
        .get(
          commons.baseUrl +
            'school/updateschoolmaster?uid=' +
            this.uid +
            '&password=' +
            this.ruleForm.checkPass
        )
        .then((resp) => {})
    },

    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    allschool() {
      axios.get(commons.baseUrl + 'school/allschool').then((res) => {
        //res返回结果
        console.log(res.data)
        this.uid = res.data.uid
        this.account = res.data.account
        this.password = res.data.password
        this.tableData = res.data
      })
    },
    select(row) {
      console.log(row)
      this.selectdialogVisible = true
      this.account = row.account
      this.password = row.password
    },

    update(row) {
      this.updatedialogVisible = true
      this.uid = row.uid
    },
  },

  //生命周期函数,在页面创建成功时回调
  mounted() {
    this.allschool()
  },
}
</script>
<style scoped>
</style>